<template>
  <div class="box hide-scroller-bar">
    <a-row style="width: 100%; height: 100%">
      <a-col flex="50%" class="left-box hide-scroller-bar">
        <div class="create-list hide-scroller-bar">
          <a-col
            v-for="item in createList"
            :key="item.key"
            @click="createClick(item)"
          >
            <div
              class="border-list"
              :class="createKey == item.key ? 'border-red' : ''"
            >
              <div class="list">
                <div class="list-title">口播专家</div>
                <div>口播稿不知道怎么写？找我就对了</div>
                <img
                  class="list-image"
                  src="https://ui.biaodianyun.com/dy-saas/admin-pc/assets/bg_ai_koubo-f833b91a.png"
                />
              </div>
            </div>
          </a-col>
        </div>
        <a-form layout="vertical">
          <a-form-item v-bind="validateInfos.demand">
            <template #label>
              <span style="font-size: 16px; font-weight: 600"
                >请告诉我，你的需求</span
              >
            </template>
            <a-textarea
              v-model:value="modelRef.demand"
              show-count
              :maxlength="500"
              :rows="10"
              placeholder="这样写，效果更好哦（示例）
我的行业：美容
我的店名：小美医美
我要介绍的商品：水光针299元体验套餐
突出关键词：无需预约、十年老店、过期自动退
"
            />
          </a-form-item>
          <a-row :gutter="[10, 16]">
            <a-col>快速输入</a-col>
            <a-col :span="20">
              <a-tag
                v-for="item in tagList"
                :key="item.key"
                style="margin-bottom: 5px"
                @click="tagClick(item)"
                ><a>{{ item.title }}</a></a-tag
              >
            </a-col>
          </a-row>
          <a-row
            v-if="isMoreParameters"
            class="isMoreParameters"
            :gutter="[10, 16]"
          >
            <a-col>
              <a-form-item>
                <template #label>
                  <span style="font-size: 16px; font-weight: 600">语气</span>
                </template>
                <a-select
                  v-model:value="modelRef.tone"
                  style="width: 265px"
                  :options="toneOptions"
                ></a-select>
              </a-form-item>
            </a-col>
            <a-col>
              <a-form-item>
                <template #label>
                  <span style="font-size: 16px; font-weight: 600">自由度</span>
                </template>
                <a-select
                  v-model:value="modelRef.freedom"
                  style="width: 265px"
                  :options="freedomOptions"
                ></a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <a-row justify="center">
          <a-col class="expand" @click="expandClick"
            >展开更多参数<down-outlined v-if="expandClick" />
            <up-outlined v-else />
          </a-col>
        </a-row>
      </a-col>
      <a-col flex="50%" class="right-box hide-scroller-bar">
        <a-card
          title="Default size card"
          :bodyStyle="{
            padding: '10px',
          }"
          v-for="i in 10"
          :key="i"
          style="margin-bottom: 10px"
        >
          <div>
            <a-textarea :rows="4" placeholder="请输入" />
          </div>
          <a-row justify="space-between" style="margin: 10px 0">
            <a-col style="color: #9ea4aa">2023-22-22</a-col>
            <a-col>10</a-col>
          </a-row>
          <a-row justify="space-between">
            <a-col>
              <a-button class="replace-btn">换一换</a-button>
            </a-col>
            <a-col style="display: flex">
              <!-- 保存 -->
              <a-col class="tag-list">
                <a-tooltip>
                  <template #title>保存文案</template>
                  <save-outlined />
                </a-tooltip>
              </a-col>
              <!-- 语音 -->
              <a-col class="tag-list">
                <a-tooltip>
                  <template #title>文字转语音</template>
                  <audio-outlined />
                </a-tooltip>
              </a-col>
              <!-- 复制 -->
              <a-col class="tag-list">
                <a-tooltip>
                  <template #title>复制文案</template>
                  <copy-outlined />
                </a-tooltip>
              </a-col>
              <!-- 赞 -->
              <a-col class="tag-list">
                <a-tooltip>
                  <template #title>感觉还不错，就点个赞吧</template>
                  <like-outlined />
                </a-tooltip>
              </a-col>
              <!-- 踩 -->
              <a-col class="tag-list">
                <a-tooltip>
                  <template #title>内容不行呀，踩一下</template>
                  <dislike-outlined />
                </a-tooltip>
              </a-col>
              <!-- 删除 -->
              <a-col class="tag-list">
                <a-tooltip>
                  <template #title>删除</template>
                  <delete-outlined />
                </a-tooltip>
              </a-col>
            </a-col>
          </a-row>
        </a-card>
        <div class="pagination-fixed">
          <a-pagination v-model:current="page" :total="50" show-less-items />
        </div>
      </a-col>
    </a-row>
    <div class="fixed-box">
      <div>
        <a-form-item label="生成条数" v-bind="validateInfos.itemNum">
          <a-input-number
            id="inputNumber"
            v-model:value="modelRef.itemNum"
            :min="1"
            style="width: 200px"
          />
        </a-form-item>
      </div>
      <a-row justify="space-between" style="margin-bottom: 10px">
        <a-col style="color: #9ea4aa">剩余条数</a-col>
        <a-col
          style="color: #ff6865; cursor: pointer"
          @click="$router.push({ name: 'VoucherCenter' })"
          >获取更多条数</a-col
        >
      </a-row>
      <a-button type="primary" danger block @click="submitClick"
        >生成内容</a-button
      >
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  createVNode,
  ref,
  nextTick,
} from "vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;
import {
  DownOutlined,
  UpOutlined,
  SaveOutlined,
  AudioOutlined,
  CopyOutlined,
  LikeOutlined,
  DislikeOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";

export default defineComponent({
  name: "CreateDrawerItem",
  components: {
    DownOutlined,
    UpOutlined,
    SaveOutlined,
    AudioOutlined,
    CopyOutlined,
    LikeOutlined,
    DislikeOutlined,
    DeleteOutlined,
  },
  props: {},
  setup(props, { emit }) {
    const state = reactive({
      createKey: 0,
      createList: [
        {
          title: "口碑专家",
          key: 0,
        },
        {
          title: "口播专家",
          key: 1,
        },
        {
          title: "脚本专家",
          key: 2,
        },
        {
          title: "标题专家",
          key: 3,
        },
        {
          title: "小说专家",
          key: 4,
        },
        {
          title: "口碑专家",
          key: 5,
        },
      ],

      tagList: [
        {
          title: "我的行业",
          key: 0,
        },
        {
          title: "我的点名",
          key: 2,
        },
      ],

      isMoreParameters: false,
      toneOptions: [
        {
          value: 1,
          label: "默认",
        },
      ],
      freedomOptions: [
        {
          value: 1,
          label: "默认",
        },
        {
          value: 2,
          label: "低",
        },
        {
          value: 3,
          label: "中",
        },
        {
          value: 4,
          label: "高",
        },
      ],

      page: 1,
    });

    const modelRef = reactive({
      demand: "",
      tone: 1,
      freedom: 1,
      itemNum: "1",
    });
    const rulesRef = reactive({
      demand: [
        {
          required: true,
          message: "请输入你的需求",
        },
      ],
      itemNum: [
        {
          required: true,
          message: "请输入生成数量",
        },
      ],
    });

    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const onClose = () => {
      resetFields();
      emit("onClose");
    };

    const createClick = (data) => {
      state.createKey = data.key;
    };

    const tagClick = ({ title }) => {
      modelRef.demand = modelRef.demand.concat(title + ":" + "\n");
    };

    const expandClick = () => {
      state.isMoreParameters = !state.isMoreParameters;
    };

    const submitClick = () => {
      validate().then(() => {
        console.log("2");
      });
    };

    return {
      onClose,
      ...toRefs(state),
      createClick,
      modelRef,
      validateInfos,
      tagClick,
      expandClick,
      submitClick,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .left-box {
    padding: 10px;
    width: 100%;
    height: 90%;
    overflow: hidden auto;
    position: relative;
    padding-bottom: 110px;

    .create-list {
      width: 100%;
      //   height: 180px;
      overflow: auto;
      display: flex;
      flex-wrap: nowrap;
      margin-bottom: 20px;
      .border-list {
        padding: 5px;
        margin: 0 auto;
        border: 2px solid #fff;
        .list {
          width: 150px;
          height: 180px;
          overflow: hidden;
          background-color: rgb(3, 183, 169);
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          padding: 20px;
          padding-bottom: 0;
          text-align: center;
          color: #fff;
          .list-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 5px;
          }
          .list-image {
            width: 104px;
            height: 77px;
          }
        }
        &.border-red {
          border: 2px solid red;
          border-radius: 5px;
        }
      }
    }

    .expand {
      margin-top: 10px;
      color: #aeb3b8;
      cursor: pointer;
    }

    .isMoreParameters {
      margin-top: 10px;
    }
  }

  .right-box {
    width: 100%;
    height: 90%;
    overflow: hidden auto;
    background: #fafafc;
    padding: 10px;
    .replace-btn {
      background: #ffdddd;
      color: #2878FF;
      border: none;
      border-radius: 10px;
    }
    .tag-list {
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 32px;
      background: #f4f5f5;
      border-radius: 5px;
      cursor: pointer;
      margin-right: 10px;
    }
  }
  .fixed-box {
    position: sticky;
    bottom: 30px;
    width: 50%;
    box-shadow: 0 -6px 6px -6px #0000002e;
    background: #fff;
    padding: 10px;
  }

  .pagination-fixed {
    position: fixed;
    right: 30px;
    bottom: 10px;
  }
}
</style>
